<template>
    <div class="login">
        <div class="logo"><img src="../assets/img/logo.png" alt=""></div>
        <div class="login-bg">
            <div class="login-form">
                <input class="user" v-model="username" type="text" placeholder="请输入手机号/用户名">
                <input class="pwd" v-model="password" type="password" placeholder="请输入密码" @keyup.enter="submit">
                <div style="height: 18px;">
                    <div class="error" v-if="err_message">
                        <Icon type="minus-circled"></Icon>
                        <span>{{err_message}}</span>
                    </div>
                </div>    
                <div class="login-time">
                    <Checkbox v-model="single">十天内免登录</Checkbox>
                </div>
                <button class="submit" @click="submit">登录</button>
                <div class="regist-forgot">
                    <router-link to="/regist">注册账号</router-link>
                    <router-link class="forgot" to="/forgotpwd">忘记密码？</router-link>
                </div>
                <div class="other">
                    <span>其它方式登陆</span>
                    <div class="wechatlogin" @click="wepylogin">
                        <img src="../assets/img/WeChat_N.png" alt="" class="wechatN wechatimg">
                        <img src="../assets/img/WeChat_H.png" alt="" class="wechatH wechatimg">
                    </div>    
                </div>
            </div>
            <div id="login_container" v-show="wepyimg">
            
            </div>
        </div> 
    </div>
</template>
<script>
import { Icon, Checkbox } from "iview";
import { submitLogin } from "../http/api";
import md5 from "js-md5"; //密码加密
export default {
    components: {
        Icon,
        Checkbox
    },
    data() {
        return {
            single: false,
            username: "",
            password: "",
            err_message: "",
            wepyimg:false,  //微信登录图片
        };
    },
    methods: {
        submit() {
            let err_arr = [];
            let mdjm = md5.hex(this.password);
            if (!this.username) {
                err_arr.push("请输入账户名！");
            }
            if (!this.password) {
                err_arr.push("请输入密码！");
            }
            if (err_arr.length == 0) {
                this.err_message = "";
                submitLogin({
                    account: this.username,
                    password: mdjm
                }).then(response => {
                    if (response.data.status == 1000) {
                        // console.log(response)
                        // 获取用户的id
                        let regid = response.data.mRegisterUsers[0].registerId;
                        let username = response.data.mRegisterUsers[0].username;

                        this.$store.commit("serUerInfo", {
                            regid: regid,
                            username: username
                        });
                        this.$store.commit('shopcar')
                        // if (this.single) {
                        //     // 当点击了十天免登陆的时候
                        //     setCookie("user", regid, 10);
                        //     setCookie("username", usename, 10);
                        // } else {
                        //     // 如果没有点击十天免登陆的时候
                        //     setCookie("user", regid);
                        //     setCookie("username", usename);
                        // }
                        this.$router.push({ path: "/index" });
                    } else {
                        this.err_message = response.data.message;
                    }
                });
            } else {
                this.err_message = err_arr[0];
            }
        },
        // 微信登录
        wepylogin() {
            this.wepyimg = true
            var obj = new WxLogin({
                self_redirect:true,
                id:"login_container", 
                appid: "wx4e78d3dcabdb0f25", 
                scope: "snsapi_login", 
                redirect_uri: encodeURIComponent("https://" + window.location.host + "#/login"),
                state: Math.ceil(Math.random()*1000),
                style: "black",
                href: ""
            });
            // console.log(obj)
            console.log(window.location)
        }
    },
    created() {}
};
</script>

<style lang="less">
@import "../assets/styles/login.less";
</style>
